<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>旅游网 - 发现世界之美</title>
    <!-- Bootstrap 5 CSS -->
    <link href="../../bootstrap-5.3.6-dist/css/bootstrap.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="index.css">

</head>
<body class="d-flex flex-column min-vh-100">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top rounded-4 mb-1">
        <div class="container">
            <a class="navbar-brand fw-bold" href="index.html">
                <i class="bi bi-compass me-2"></i>旅游网
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarMain">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" href="index.html"><i class="bi bi-house-door me-1"></i>首页</a>
                    </li>
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" href="../Local/Local.html"><i class="bi bi-map me-1"></i>目的地</a>
                    </li>
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" href="../gl/index.html"><i class="bi bi-journal-text me-1"></i>攻略群</a>
                    </li>
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" target="_blank" href="../index/Popular_travelogues/Popular_travelogues.html"><i class="bi bi-people me-1"></i>社区</a>
                    </li>
                    <li class="nav-item mx-sm-1">
                        <a class="nav-link" href="../LoginRegiser/login/login.html"><i class="bi bi-person me-1"></i>登录</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <div class="input-group">
                        <input type="search" class="form-control shadow-none" placeholder="搜索目的地..." aria-label="Search">
                        <button class="btn btn-light" type="submit">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div id="mainCarousel" class="carousel slide mb-4" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="北京"></button>
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="上海"></button>
            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="武汉"></button>
        </div>
        <div class="carousel-inner rounded-3 overflow-hidden">
            <div class="carousel-item active">
                <img src="https://www.w3school.com.cn/i/photo/beijing.jpg" class="d-block w-100" alt="北京" >
                <div class="carousel-caption d-none d-md-block start-0 end-0 mx-auto p-3">
                    <h3>北京</h3>
                    <p>探索千年古都的魅力</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://www.w3school.com.cn/i/photo/shanghai-1.jpg" class="d-block w-100" alt="上海">
                <div class="carousel-caption d-none d-md-block start-0 end-0 mx-auto p-3">
                    <h3>上海</h3>
                    <p>感受东方明珠的现代与繁华</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://www.w3school.com.cn/i/photo/wuhan.jpg" class="d-block w-100" alt="武汉">
                <div class="carousel-caption d-none d-md-block start-0 end-0 mx-auto p-3">
                    <h3>武汉</h3>
                    <p>品味江城的美食与文化</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">上一张</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">下一张</span>
        </button>
    </div>

    <!-- 服务卡片 -->
    <div class="container mb-5">
        <h2 class="text-center mb-4 fw-bold"><i class="bi bi-stars me-2"></i>旅行服务</h2>
        <div class="row g-3 row-cols-2 row-cols-md-3 row-cols-lg-6">
            <div class="col">
                <a href="../gl/index.html" class="card h-100 shadow-sm hover-card border-0 text-decoration-none">
                    <div class="card-body text-center py-4">
                        <i class="bi bi-people-fill text-primary fs-3 mb-3"></i>
                        <h5 class="card-title">攻略群</h5>
                        <p class="card-text text-muted small">实时交流有问必答</p>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="../Local/Local.html" class="card h-100 shadow-sm hover-card border-0 text-decoration-none">
                    <div class="card-body text-center py-4">
                        <i class="bi bi-geo-alt-fill text-success fs-3 mb-3"></i>
                        <h5 class="card-title">当地游</h5>
                        <p class="card-text text-muted small">最地道的玩法体验</p>
                    </div>
                </a>
            </div>
            <div class="col">
                <div class="card h-100 shadow-sm hover-card border-0">
                    <div class="card-body text-center py-4">
                        <i class="bi bi-airplane-engines-fill text-info fs-3 mb-3"></i>
                        <h5 class="card-title">自由行</h5>
                        <p class="card-text text-muted small">旅行就要更自在</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100 shadow-sm hover-card border-0">
                    <div class="card-body text-center py-4">
                        <i class="bi bi-signpost-split-fill text-warning fs-3 mb-3"></i>
                        <h5 class="card-title">跟团游</h5>
                        <p class="card-text text-muted small">行程透明省心游</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <a href="../book a hotel/book a hotel.html" class="card h-100 shadow-sm hover-card border-0 text-decoration-none">
                    <div class="card-body text-center py-4">
                        <i class="bi bi-building-fill text-danger fs-3 mb-3"></i>
                        <h5 class="card-title">订酒店</h5>
                        <p class="card-text text-muted small">一键全网比价</p>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="../visa/visa.html" class="card h-100 shadow-sm hover-card border-0 text-decoration-none">
                    <div class="card-body text-center py-4">
                        <i class="bi bi-archive-fill text-secondary fs-3 mb-3"></i>
                        <h5 class="card-title">签证</h5>
                        <p class="card-text text-muted small">出签率高服务佳</p>
                    </div> 
                </a>       
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="container flex-grow-1 mb-4">
        <div class="row g-4">
            <!-- 侧边栏 -->
            <aside class="col-lg-3">
                <!-- 安全提示 -->
                <div class="card shadow-sm mb-4 img-hover-zoom">
                    <a href="#">
                        <img src="https://images.mafengwo.net/images/safety-prevention/index-link-v2.png" class="card-img-top" alt="安全提示">
                    </a>
                    <div class="card-body">
                        <h5 class="card-title">安全提示</h5>
                        <p class="card-text small text-muted">旅行安全注意事项</p>
                    </div>
                </div>
                
                <!-- 旅游攻略推荐 -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">旅游攻略推荐</h5>
                            <a href="#" class="small text-decoration-none">更多 <i class="bi bi-chevron-right"></i></a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-flex gap-3">
                            <div class="img-hover-zoom flex-shrink-0">
                                <img src="https://p1-q.mafengwo.net/s19/M00/33/44/CoNDeGIUnOkPtqlaAAQ62RUPBaM.jpeg" class="rounded" width="80" height="60" alt="攻略封面">
                            </div>
                            <div>
                                <h6 class="card-title mb-1">【Fun新去皖】</h6>
                                <p class="card-text small text-muted">游千年古城</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 最新资讯 -->
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">旅游网最新资讯</h5>
                    </div>
                    <div class="list-group list-group-flush">
                        <a href="#" class="list-group-item list-group-item-action small d-flex justify-content-between align-items-start">
                            <span class="me-2">04月07日</span>
                            <span class="flex-grow-1">"云旅游"直播的攻与守</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action small d-flex justify-content-between align-items-start">
                            <span class="me-2">04月01日</span>
                            <span class="flex-grow-1">旅游业的"云上战疫"</span>
                        </a>
                        <a href="#" class="list-group-item list-group-item-action small d-flex justify-content-between align-items-start">
                            <span class="me-2">02月19日</span>
                            <span class="flex-grow-1">科技"战疫"：大数据赋能旅游业</span>
                        </a>
                    </div>
                </div>
            </aside>
            
            <!-- 主内容 -->
            <main class="col-lg-9">
                <!-- 游记导航 -->
                <div class="card shadow-sm mb-4">
                    <div class="card-body p-3">
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <ul class="nav nav-pills me-auto mb-2 mb-lg-0">
                                <li class="nav-item me-2">
                                    <a class="nav-link btn btn-outline-secondary text-black" href="#"><i class="bi bi-fire me-1 text-black"></i>热门游记</a>
                                </li>
                                <li class="nav-item me-2">
                                    <a class="nav-link btn btn-outline-secondary text-black" href="#"><i class="bi bi-funnel me-1 text-black"></i>筛选</a>
                                </li>
                                <li class="nav-item me-2">
                                    <a class="nav-link btn btn-outline-secondary text-black" href="#"><i class="bi bi-clock me-1 text-black"></i>最新发表</a>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-warning btn-sm">
                                <i class="bi bi-pencil-square me-1"></i>写游记
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 游记列表 -->
                <div class="row g-4">
                    <!-- 游记1 -->
                    <div class="col-12">
                        <div class="card shadow-sm note-item h-100">
                            <div class="row g-0 h-100">
                                <div class="col-md-4 img-hover-zoom">
                                    <img src="https://note.mafengwo.net/img/55/14/f1e84f54bd0e9ea43e621491d3bb7357.jpeg" class="img-fluid rounded-start h-100" style="object-fit: cover;" alt="六月特辑">
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body h-100 d-flex flex-column">
                                        <h3 class="card-title">
                                            <a href="Popular_travelogues/Popular_travelogues.html" class="text-decoration-none text-black" target="_blank">六月特辑 | 一起做野生小孩</a>
                                        </h3>
                                        <p class="card-text text-muted text-clamp-2 flex-grow-1">
                                            Hola，亲爱的蜂锋们新一期[游记月刊]踩着六一的滑板更新啦！快来围观这群"野生小孩"的旅行日记吧！
                                        </p>
                                        <div class="d-flex flex-wrap align-items-center text-muted small mt-auto">
                                            <span class="me-3"><i class="bi bi-geo-alt me-1"></i>中国</span>
                                            <span class="me-3"><i class="bi bi-eye me-1"></i>7504</span>
                                            <span class="me-3"><i class="bi bi-chat-left-text me-1"></i>15</span>
                                            <span><i class="bi bi-hand-thumbs-up me-1"></i>236</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 游记2 -->
                    <div class="col-12">
                        <div class="card shadow-sm note-item h-100">
                            <div class="row g-0 h-100">
                                <div class="col-md-4 img-hover-zoom">
                                    <img src="https://note.mafengwo.net/img/57/0c/6c097bcb5024988c2ac5f115b9b55610.jpeg" class="img-fluid rounded-start h-100" style="object-fit: cover;" alt="阿拉斯加探亲记">
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body h-100 d-flex flex-column">
                                        <h3 class="card-title">
                                            <a href="Popular_travelogues/Popular_travelogues.html" class="text-decoration-none text-black" target="_blank">【盒饭看世界】在世界的尽头撒野，阿拉斯加探亲记</a>
                                        </h3>
                                        <p class="card-text text-muted text-clamp-2 flex-grow-1">
                                            序言 当你老了，是否会有闲情逸致，在一个温暖的下午，回顾自己生命中经历的那些幸福的、兴奋的、也可能是悲伤的、遗憾的瞬间呢...
                                        </p>
                                        <div class="d-flex flex-wrap align-items-center text-muted small mt-auto">
                                            <span class="me-3"><i class="bi bi-geo-alt me-1"></i>阿拉斯加</span>
                                            <span class="me-3"><i class="bi bi-eye me-1"></i>7909</span>
                                            <span class="me-3"><i class="bi bi-chat-left-text me-1"></i>26</span>
                                            <span><i class="bi bi-hand-thumbs-up me-1"></i>378</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <div class="col-12">
                        <nav aria-label="游记分页">
                            <ul class="pagination pagination-sm justify-content-center">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                                        <i class="bi bi-chevron-left"></i>
                                    </a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#">
                                        <i class="bi bi-chevron-right"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-4 mb-md-0">
                    <h5><i class="bi bi-compass me-2"></i>旅游网</h5>
                    <p class="mb-2">提供最专业的旅游攻略和社区服务</p>
                    <div class="social-icons">
                        <a href="#" class="text-white me-3"><i class="bi bi-facebook fs-4"></i></a>
                        <a href="#" class="text-white me-3"><i class="bi bi-twitter fs-4"></i></a>
                        <a href="#" class="text-white me-3"><i class="bi bi-instagram fs-4"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-wechat fs-4"></i></a>
                    </div>
                </div>
                <div class="col-md-6 text-md-end">
                    <ul class="list-inline footer-links mb-3">
                        <li class="list-inline-item me-3"><a href="#">关于我们</a></li>
                        <li class="list-inline-item me-3"><a href="#">隐私政策</a></li>
                        <li class="list-inline-item me-3"><a href="#">使用条款</a></li>
                        <li class="list-inline-item"><a href="#">联系我们</a></li>
                    </ul>
                    <p class="mb-0 small">
                        © 2025 旅游网. 23软件技术2班. 版权所有 
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap Bundle with Popper -->
    <script src="../../bootstrap-5.3.6-dist/js/bootstrap.js"></script>
    <script src="index.js"></script>
</body>
</html>